<template>
  <div class="app-container">
    <!-- 条件查询开始 -->
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          type="primary"
          @click="getPicInfo()"
          style="float: right"
          size="small"
          >查询</el-button
        >
        <el-button
          :type="JSON.stringify(albumPicQuery) == '{}' ? 'default' : 'danger'"
          @click="restData()"
          style="float: right; margin-right: 15px"
          size="small"
          >清空</el-button
        >
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item>
            <el-input
              v-model="albumPicQuery.id"
              placeholder="图片ID"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-select
              v-model="albumPicQuery.albumId"
              filterable
              placeholder="专辑名称"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.albumName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <!-- <el-form-item>
            <el-input
              v-model="albumPicQuery.name"
              placeholder="演员名字"
            ></el-input>
          </el-form-item> -->
          <el-form-item>
            <el-select v-model="albumPicQuery.online" placeholder="状态">
              <el-option label="全部" :value="null"></el-option>
              <el-option label="已上线" :value="1"></el-option>
              <el-option label="未上线" :value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="albumPicQuery.startTime"
              type="datetime"
              placeholder="更新起始时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="00:00:00"
            ></el-date-picker>
          </el-form-item>

          <el-form-item>
            <el-date-picker
              v-model="albumPicQuery.endTime"
              type="datetime"
              placeholder="更新结束时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              default-time="24:00:00"
            ></el-date-picker>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <!-- 条件查询结束 -->

    <!-- 数据表开始 -->
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    <div class="table-container">
          <el-table
      stripe
      :data="resList"
      @cell-click="cellClickHandle"
      v-loading="loading"
      style="width: 100%"
    >
      <!-- 展开行开始 -->
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="图片ID">
              <span>{{ props.row.id }}</span>
            </el-form-item>
            <el-form-item label="所属专辑">
              <span>{{ props.row.album.albumName }}</span>
            </el-form-item>
            <el-form-item label="专辑ID">
              <span>{{ props.row.album.id }}</span>
            </el-form-item>
            <el-form-item label="专辑创建时间">
              <span>{{ props.row.album.gmtCreate }}</span>
            </el-form-item>
            <el-form-item label="专辑修改时间">
              <span>{{ props.row.album.gmtModified }}</span>
            </el-form-item>
            <el-form-item label="专辑状态">
              <template>
                {{ props.row.album.online === 1 ? "已上线" : "未上线" }}
              </template>
            </el-form-item>

            <el-form-item label="">
              <!-- 添加图片 -->
              <router-link :to="'/album/add/' + props.row.album.id">
                <el-button
                  type="primary"
                  size="mini"
                  icon="el-icon-upload"
                  style="margin-left: 10px"
                  >上传图片到此专辑</el-button
                >
              </router-link>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <!-- 展开行结束 -->

      <el-table-column prop="date" label="序号" width="80px">
        <template slot-scope="scope">
          {{ (page - 1) * limit + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="actorName" label="演员名字" width="80px"> </el-table-column>
      <el-table-column label="缩略图" width="150px">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="
              String(scope.row.picUrl).startsWith('http')
                ? `${scope.row.picUrl}`
                : `${BASE_API}${scope.row.picUrl}`
            "
            :preview-src-list="
              String(scope.row.picUrl).startsWith('http')
                ? [`${scope.row.picUrl}`]
                : [`${BASE_API}${scope.row.picUrl}`]
            "
            fit="cover"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="hot" label="热度" width="80px"> </el-table-column>
      <el-table-column label="所属专辑" width="80px">
        <template slot-scope="scope">
          <el-link :underline="false">{{ scope.row.album.albumName }}</el-link>
        </template>
      </el-table-column>
      <el-table-column prop="gmtCreate" label="创建时间"> </el-table-column>
      <el-table-column prop="gmtModified" label="修改时间"> </el-table-column>
      <el-table-column prop="online" label="状态" width="80px">
        <template slot-scope="scope">
          {{ scope.row.online === 1 ? "已上线" : "未上线" }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <!-- 上下线切换按钮 -->
          <el-link
            :type="scope.row.online === 1 ? 'warning' : 'info'"
            size="mini"
            icon="el-icon-connection"
            style="margin-left: 10px"
            @click="
              modifiyAlbumPicOnline(
                scope.row.id,
                scope.row.online === 1 ? 0 : 1
              )
            "
          >
            {{ scope.row.online === 1 ? "下线" : "上线" }}
          </el-link>
          <!-- 删除按钮 -->
          <el-link
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="removeDataById(scope.row.id, scope.row.albumName)"
            style="margin-left: 10px"
            >删除</el-link
          >
        </template>
      </el-table-column>
    </el-table>
    </div>

    <!-- 数据表结束 -->
    <!-- 分页开始 -->
    <el-pagination
      :current-page="page"
      :page-size="limit"
      :total="total"
      layout="total,prev, pager, next,jumper"
      @current-change="getPicInfo"
      style="padding: 30px 0; text-align: center"
    >
    </el-pagination>
    <!-- 分页结束 -->
  </div>
</template>
<script>
import albumPic from "@/api/albumPic";
export default {
  data() {
    return {
      //专辑信息
      options: [],
      //   //选中的专辑ID
      //   albumValue: "",
      loading: true,
      resList: null,
      page: 1,
      limit: 10,
      total: 0,
      albumPicQuery: {},
      //获取服务器地址
      //BASE_API: process.env.VUE_APP_BASE_API,
      BASE_API: this.$VUE_APP_BASE_API,
    };
  },
  created() {
    this.getPicInfo();
    this.getAlbumInfo();
  },
  methods: {
    //获得专辑图片列表
    getPicInfo(page = 1) {
      this.page = page;
      albumPic 
        .getAlbumListPage(this.page, this.limit, this.albumPicQuery)
        .then((res) => {
          console.log(res.data.result);
          this.resList = res.data.result;
          this.total = res.data.total;
          this.loading = false;
        });
    },

    //获得专辑信息
    getAlbumInfo() {
      albumPic.getAlbum().then((res) => {
        this.options = res.data.result;
      });
    },

    //单元格选中事件
    cellClickHandle(row, column, cell, $event) {
      // console.log(row)
      //console.log(column)
      // console.log(cell)
      // console.log(event)
      if (column.label == "所属专辑") {
        console.log(row.album.id);
        this.albumPicQuery.albumId = row.album.id;
        this.getPicInfo((this.page = 1), this.limit, this.albumPicQuery);
      }
    },
    //删除图片
    removeDataById(id) {
      this.$confirm(`此操作将永久删除该文件, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          albumPic.deleteAlbumById(id).then((res) => {
            this.$message.success("删除成功");
            this.getPicInfo();
          });
        })
        .catch(() => {
          this.$message.info("取消删除");
        });
    },
    //清空
    restData() {
      this.albumPicQuery = {};
      this.getPicInfo();
    },
    //切换上下线状态
    modifiyAlbumPicOnline(id, state) {
      albumPic.modifiyOnline(id, state).then((res) => {
        console.log(res);
        this.getPicInfo();
      });
    },
  },
};
</script>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 100px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>